<template>
  <div class="bottom_bar_tetail">
      <div class="left">
          <div class="a">
              <img src="@/assets/img/detail/kf.png" alt="">
              <span>客服</span>
          </div>
          <div class="b">
                <img src="@/assets/img/detail/dp.png" alt="">
                <span>店铺</span>
          </div>
          <div class="c">
                <img src="@/assets/img/detail/sc2.png" alt="">
                <span>收藏</span>
          </div>
      </div>
      <div class="shopping_detail" @click="add_shopping">加入购物车</div>
      <div class="buy">购买</div>
  </div>
</template>

<script>
export default {
    name:"DetailBottomBar",
    methods:{
        // 点击购物车添加
        add_shopping(){
            this.$emit('add_shopping')
        }
    }
}
</script>

<style scoped>
.bottom_bar_tetail{
    display: flex;
    height: 49px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.shopping_detail,.buy{
    flex: 25%;
}
.bottom_bar_tetail>div{
    height: 49px;
}
.bottom_bar_tetail img{
    width: 35%;
}
.left{
    flex: 50%;
    display: flex;
    justify-content: space-around;
}
.left div{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
}
.shopping_detail,.buy{
    text-align: center;
    height: 49px;
    line-height: 49px;
    color:#fff;
}
.shopping_detail{
    
    background-color: rgb(238, 194, 49);
}
.buy{
    background-color: rgb(223, 79, 79);
}

</style>